<template>
  <div class="mutual-evaluation">
    <h2 class="title">互评界面</h2>

    <!-- 需要互评的作业列表 -->
    <div class="homework-list">
      <el-table :data="mutualHomeworkList" border stripe>
        <el-table-column label="作业名称" prop="mutualName" />
        <el-table-column label="截止时间" prop="endTime" />
        <el-table-column label="互评得分" prop="mutualScore" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="evaluateHomework(scope.row)">
              进入互评
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 互评窗口 -->
    <el-dialog
      :visible.sync="evaluationDialogVisible"
      title="作业互评"
      width="600px"
    >
      <p><strong>作业名称：</strong>{{ selectedHomework.mutualName }}</p>
      <p><strong>截止时间：</strong>{{ selectedHomework.endTime }}</p>
      <el-rate
        v-model="selectedHomework.score"
        :max="100"
        :low-threshold="60"
        :high-threshold="90"
        :show-text="true"
      />
      <el-input
        v-model="selectedHomework.comment"
        placeholder="请输入评价内容"
        type="textarea"
        rows="4"
        maxlength="200"
        show-word-limit
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="postHomeworkScore(selectedHomework)">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      userId: 1, // 替换为实际的用户ID
      mutualHomeworkList: [], // 需要互评的作业列表
      evaluationDialogVisible: false, // 控制互评窗口是否显示
      selectedHomework: {}, // 当前选中的作业，用于互评
    };
  },
  created() {
    // 获取需要互评的作业
    this.fetchMutualHomework();
  },
  methods: {
    // 获取需要互评的作业列表
    async fetchMutualHomework() {
      try {
        const response = await axios.get("/homework/getmutual", {
          params: { userId: this.userId },
        });
        // 初始化作业列表
        this.mutualHomeworkList = response.data.map((item) => ({
          mutualId: item.mutualId,
          studentHomeworkId: item.studentHomeworkId,
          mutualName: item.mutualName,
          mutualScore: item.mutualScore || "未评分",
          endTime: item.endTime,
          score: 0, // 默认互评分数
          comment: "", // 默认评价内容
        }));
      } catch (error) {
        console.error("获取需要互评的作业失败:", error);
      }
    },

    // 打开互评窗口
    evaluateHomework(homework) {
      this.selectedHomework = { ...homework }; // 复制作业数据到选中作业
      this.evaluationDialogVisible = true; // 打开互评窗口
    },

    // 关闭互评窗口
    closeDialog() {
      this.evaluationDialogVisible = false;
    },

    // 提交互评分数和评价内容
    async postHomeworkScore(homework) {
      if (!homework.score || homework.score === 0) {
        this.$message.warning("评分不能为空！");
        return;
      }

      try {
        const response = await axios.post("/homework/studentscore", {
          studentHomeworkId: homework.studentHomeworkId,
          score: homework.score,
          userId: this.userId,
        });

        this.$message.success("提交互评成功！");
        this.evaluationDialogVisible = false; // 关闭互评窗口

        // 更新互评状态
        const index = this.mutualHomeworkList.findIndex(
          (item) => item.studentHomeworkId === homework.studentHomeworkId
        );
        if (index !== -1) {
          this.$set(this.mutualHomeworkList, index, {
            ...this.mutualHomeworkList[index],
            mutualScore: homework.score,
          });
        }
      } catch (error) {
        console.error("提交互评失败:", error);
        this.$message.error("提交互评失败，请稍后再试！");
      }
    },
  },
};
</script>

<style scoped>
.mutual-evaluation {
  width: 80%;
  margin: 0 auto;
}

.title {
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

.homework-list {
  margin-top: 20px;
}
</style>
